<template>
  <view>
    <view
        v-for="(item,index) in count" :key="item"
        class="box">
      <view>{{item}}</view>
      <view class="line"></view>
    </view>
    <!--自定义上拉加载-->
    <view v-if="isBottomShow" class="onbottom">正在加载中.....</view>
  </view>
</template>

<script setup lang="js">
//在vite.config.js中配置了全局导入，所以这里不用导入也能异性你
// import { onReachBottom } from '@dcloudio/uni-app'
const count = ref(100)
const  isBottomShow=ref(false)

//开启下拉刷新
setTimeout(()=>{
  uni.startPullDownRefresh()
},1000)

//停止下拉刷新
setTimeout(()=>{//模拟耗时请求
  count.value += 10
  uni.stopPullDownRefresh()
},2000)


//上拉加载触底函数
onReachBottom(()=>{
  isBottomShow.value=true
  console.log('到底部了');
  setTimeout(()=>{//模拟耗时请求
    count.value += 100
    isBottomShow.value=false
  },3000)
})
</script>
<style lang="less">
.onbottom{//触底加载样式
  width: 100%;
  height: 60px;
  text-align: center;
  line-height: 60px;
}
.slv{
  height: 200px;
  width: 100%;
  background-color: aquamarine;
}
.box{
  height: 80px;
  width: 100%;
  background-color: bisque;
}
.line{
  height: 3px;
  background-color: aliceblue;
  width: 100%;
}

</style>
